import { useState } from 'react';

const Index = ({ node }) => {
  // 使用状态来管理每个节点的展开状态
  const [isExpanded, setIsExpanded] = useState(false);

  // 点击时切换展开状态
  const onClick = () => {
    setIsExpanded(!isExpanded);
    console.log(node.label); // 输出当前节点的标签
  };

  return (
    <div>
      <div onClick={onClick}>
        {node.children && (isExpanded ? '[-]' : '[>]')}
        {node.label}
      </div>

      {/* 仅当 isExpanded 为 true 时渲染子节点 */}
      {isExpanded &&
        node.children &&
        node.children.map((item) => (
          <div key={item.value} className="ml-10">
            <Index node={item} />
          </div>
        ))}
    </div>
  );
};

export default Index;
